<template>
  <div class="head">
    <el-row class="box">
      <el-col :span="8" class="user-box">
        <img
          class="avatar"
          src="https://s1.ax1x.com/2022/07/05/jtMjGq.jpg"
          alt=""
          srcset=""
        />
        <div class="tip">
          <h1>早安，管理员，开始您一天的工作吧！</h1>
          <p>今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p>
        </div>
      </el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple-light" /></el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  nextTick,
  getCurrentInstance,
} from 'vue'
import type { PropType } from 'vue'

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.head {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  background-color: var(--el-bg-color);
  box-sizing: border-box;
  padding: 10px;
  margin-top: 10px;

  .user-box {
    display: flex;

    .avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }

    .tip {
      margin-left: 20px;

      h1 {
        color: #141414;
        font-size: 1rem;
      }

      p {
        color: #909399;
        font-size: 0.9rem;
        margin-top: 10px;
      }
    }
  }
}
</style>
